<template>
<div>
    <van-nav-bar
            title="退款售后"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    />
    <div class="zy">
        <div class="box">
            <div>
                <div>{{refund}}</div>
                <div>{{product.date}}</div>
            </div>
            <div class="abox"><van-icon name="success"  size="40" color="white"/></div>
        </div>
        <div class="bbox">
            <div><img :src="product.img" alt="商品"></div>
            <div>
                <div>{{product.name}}</div>
                <div>规格：{{product.goodsDesc}}</div>
                <div>￥{{product.goodsPrice}}</div>
            </div>
        </div>
        <div class="cbox">
            <div>售后进度</div>
            <div><van-icon name="arrow" /></div>
        </div>
        <div class="dbox">
            <h3>申请记录</h3>
            <ul>
                <li>服务类型：{{product.lei}}</li>
                <li>售后原因：{{product.yin}}</li>
                <li>用户：{{product.addressName}}</li>
                <li>联系方式：{{product.addressPhone}}</li>
                <li>收货地址：{{product.addressContent}}</li>
                <li>申请时间：{{product.date1}}</li>
                <li>换货编号：{{product.orderCode}}</li>
            </ul>
        </div>
        <div class="ebox"><van-icon name="service-o" />联系客服</div>
    </div>
</div>
</template>

<script>
import {Toast} from "vant";
export default {
  name: "refunds",
    data(){
      return{
          product:
              {
                  sid:'21457125',
                  tai:'1',
                  name:'摸下香水春居图120/毫升[新老包装随机发货]',
                  date:'2020年1月20日 9:02',
                  gui:'粉红色',
                  price:'120',
                  lei:'退货',
                  yin:'号码不合适',
                  user:'张三',
                  number:'13015246508',
                  address:'广东省广州市东兴街612号',
                  date1:'2020年1月10日 19:02',
                  img:'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/9c8e4afbe8174349ad8bf3a0d4cac457.jpg!sswm',
              },
          id:this.$route.query.Id,
          refund:'退款成功',
      }
    },
    mounted() {
      this.refundZy();
    },
    methods: {
        onClickLeft() {
            Toast('返回');
            this.$router.go(-1);
        },
        refundZy(){
           this.$axios.post('/api/order/orderDetail?orderId='+this.id).then((res)=>{
               let userAll=res.data.data;
               console.log(userAll);
               if(res.data.code==200){
                   this.product=userAll;
                   if(userAll.orderStatus==6){
                       this.refund='退款成功';
                   }else if(userAll.orderStatus==5){
                       this.refund='等待退款';
                   }
                   if(userAll.goods.goodsImg){
                       this.product.img='http://172.17.4.241:8887/upload/'+userAll.goods.goodsImg;
                   }
                   else {
                       this.product.img='https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/9c8e4afbe8174349ad8bf3a0d4cac457.jpg!sswm'
                   }
                   this.product.name=userAll.goods.goodsName;
                   this.product.goodsDesc=userAll.goods.goodsDesc;
                   this.product.goodsPrice=userAll.goods.goodsPrice;
                   this.product.lei='退货退款';
                   this.product.addressName=userAll.address.addressName;
                   this.product.addressContent=userAll.address.addressContent;
                   this.product.addressPhone=userAll.address.addressPhone;
                   if(userAll.user){
                       this.product.yin=userAll.user.yin;
                       this.product.date1=userAll.goods.date1;
                   }else {
                       this.product.date='2020年1月20日 9:02';
                       this.product.date1='2020年1月10日 19:02';
                       this.product.yin='老子就想退个货';
                   }
               }else {
                   this.refund='暂无信息';
               }
           })
        }
    },
}
</script>

<style scoped>
.zy{
        background-color: #f6f6f6;
    }
.box{
    background-color: #FF6633;
    display: flex;
    justify-content: space-around;
    padding: 20px 0px 20px 0px;
}
.abox{
    border: 5px solid white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
}
.box>div:first-child{
    display: flex;
    flex-direction: column;
    margin-left: -20px;
    color: white;
}
.box>div:first-child>div:first-child{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
}
.box>div:first-child>div:last-child{
    width: 180px;
}
.bbox{
    display: flex;
    text-align: left;
    background-color: white;
    margin-top: 20px;
    padding: 10px 0px 10px 10px;
}
.bbox>div:first-child{
    margin-left: 15px;
}
.bbox>div:nth-child(2){
    margin-left: 15px;
    font-size: 17px;
}
.bbox>div:nth-child(2)>div:first-child{
    font-size: 17px;
}
.bbox>div:nth-child(2)>div:nth-child(2)
{
    font-size: 14px;
    margin-top: 5px;
    color: #a19e9e;
}
.bbox>div:nth-child(2)>div:nth-child(3){
    margin-top: 5px;
    font-size: 17px;
    color: red;
}
.bbox img{
    width: 100px;
    height: 100px;
    border-radius: 5px;
}
    .cbox{
        display: flex;
        padding: 10px;
        align-items: center;
        background-color: white;
        margin-top: 10px;
    }
    .cbox>div:first-child{
        font-size: 17px;
    }
.cbox>div:last-child{
    margin-left: 300px;
}
    h3{
        text-align: left;
        padding-left: 20px;
    }
    ul>li{
        text-align: left;
        padding-left: 20px;
        color: #a19e9e;
    }
    .dbox{
        background-color: white;
        padding: 10px 0px 10px 0px;
    }
    .ebox{
        font-size: 25px;
        margin-top: 5px;
        line-height: 25px;
    }
</style>